import React, { useMemo } from 'react';
import { List, Button, Typography, Input, Space } from 'antd';
import { ReloadOutlined, PlusOutlined } from '@ant-design/icons';
import { useMediaQuery } from 'react-responsive';
import InfiniteScroll from "../InfiniteScroll/index.tsx";

const { Title } = Typography;
const { Search } = Input;

interface ManagementListProps<T> {
  title?: string;
  items: T[];
  loading: boolean;
  pagination: {
    current: number;
    pageSize: number;
    total: number;
  };
  hasMore: boolean;
  onSearch: (value: string) => void;
  onRefresh: () => void;
  onAdd?: () => void;
  onPageChange: (page: number, pageSize?: number) => void;
  loadMore: () => void;
  renderItem: (item: T) => React.ReactNode;
  searchPlaceholder?: string;
  addButtonText?: string;
  desktopExtraButtons?: () => React.ReactNode;
  mobileExtraButtons?: () => React.ReactNode;
  gridConfig?: {
    desktop: number;
    mobile: number;
  };
  showTitle?: boolean;
  showSearch?: boolean;
  showRefresh?: boolean;
  showAdd?: boolean;
}

function ManagementList<T>({
  title,
  items,
  loading,
  pagination,
  hasMore,
  onSearch,
  onRefresh,
  onAdd,
  onPageChange,
  loadMore,
  renderItem,
  searchPlaceholder = "搜索",
  addButtonText = "添加",
  desktopExtraButtons,
  mobileExtraButtons,
  gridConfig = { desktop: 3, mobile: 1 },
  showTitle = true,
  showSearch = true,
  showRefresh = true,
  showAdd = true,
}: ManagementListProps<T>) {
  const isMobile = useMediaQuery({ maxWidth: 767 });

  const listConfig = useMemo(() => ({
    grid: { 
      gutter: 16, 
      column: isMobile ? gridConfig.mobile : gridConfig.desktop 
    },
    dataSource: items,
    renderItem,
    loading: isMobile ? false : loading,
  }), [items, renderItem, loading, isMobile, gridConfig]);

  const paginationConfig = useMemo(() => ({
    ...pagination,
    onChange: onPageChange,
    showSizeChanger: true,
    showQuickJumper: true,
    showTotal: (total: number) => `共 ${total} 项`,
  }), [pagination, onPageChange]);

  const renderActionButtons = () => (
    <Space>
      {showRefresh && (
        <Button 
          icon={<ReloadOutlined />} 
          onClick={onRefresh}
        />
      )}
      {showAdd && onAdd && (
        <Button 
          type="primary" 
          icon={<PlusOutlined />} 
          onClick={onAdd}
        >
          {addButtonText}
        </Button>
      )}
    </Space>
  );

  const renderHeader = () => (
    <>
      <div className={`mb-4 ${isMobile ? 'flex flex-col' : 'flex justify-between items-center'}`}>
        <div className={`${isMobile ? 'flex justify-between items-center w-full' : 'flex'}`}>
          {showSearch && (
            <Search
              placeholder={searchPlaceholder}
              onSearch={onSearch}
              className={isMobile ? 'w-3/5' : 'w-48 mr-2'}
              allowClear
            />
          )}
          {renderActionButtons()}
        </div>
        {!isMobile && desktopExtraButtons && desktopExtraButtons()}
      </div>
      {isMobile && mobileExtraButtons && (
        <div className="mb-4">
          {mobileExtraButtons()}
        </div>
      )}
    </>
  );

  return (
    <div className="p-4">
      {showTitle && title && <Title level={2}>{title}</Title>}
      {renderHeader()}
      
      {isMobile ? (
        <InfiniteScroll
          loadMore={loadMore}
          hasMore={hasMore}
          isLoading={loading}
          currentPage={pagination.current}
          totalItems={pagination.total}
        >
          <List {...listConfig} />
        </InfiniteScroll>
      ) : (
        <List 
          {...listConfig}
          pagination={paginationConfig}
        />
      )}
    </div>
  );
}

export default ManagementList; 